<script setup lang="ts">
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
import en from 'element-plus/dist/locale/en.mjs'
import type { TableDataInitType } from '@/components/tableType'

const language = ref('zh-cn')
const locale = computed(() => (language.value === 'zh-cn' ? zhCn : en))
const emit = defineEmits(['updateCurrentPageEvent'])
const tableData = defineModel<TableDataInitType>('tableData', {required: true})

// 表格分页展示数据量事件
const handleSizeChange = (pageSize: number) => {debugger
	// tableData.value.currentPage = 1
	tableData.value.pageSize = pageSize
	emit('updateCurrentPageEvent')
}

// 翻页事件
const handleCurrentChange = (currentPage: number) => {debugger
	tableData.value.currentPage = currentPage
	emit('updateCurrentPageEvent')
}
</script>

<template>
    <!-- 
        layout="prev, pager, next"            => 前一页，页码，下一页
        :page-size="10"                       => 每页显示数据条数（默认每页展示10条）
        :pager-count="11"                     => 最大按页码钮个数
        :total="100"                          => 总条目数
        :hide-on-single-page="isOnlyOne"      => 当分页只有一页时，设置是否显示，true 不显示
        :disabled="disabled"                  => 是否禁用
        :background="background"              => 分页按钮背景色
        small                                 => 分页按钮尺寸
        layout="total , slot , -> ,  sizes, prev, pager, next, jumper"                         
        page-sizes=[5, 10, 20, 50, 100]
     -->
    <el-config-provider :locale="locale">
        <div class="pagination-container">
            <el-pagination 
                :current-page="tableData.currentPage" 
                :page-size="tableData.pageSize" 
                :page-sizes="tableData.pageSizes" 
                :total="tableData.total" 
                :layout="tableData.layout" 
                :background="tableData.background" 
                @size-change="handleSizeChange" 
                @current-change="handleCurrentChange" 
            >
                <span v-if="tableData.selected > 0" class="ml-30 text"> 已选择 {{ tableData.selected }} 条 </span>
            </el-pagination>
        </div>
    </el-config-provider>
</template>